<template>
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="focus">
      <div class="focus_left">
        <InfoBoxVue
          class="info_box"
          v-for="(item, index) in list"
          :key="index"
          @click="detailInfo(item.uid, item.pid)"
        >
          <template v-slot:img>
            <van-image
              fit="contain"
              radius="6 6 0 0"
              :src="item.imageUrl"
              alt="fail"
              class="img"
            ></van-image>
          </template>
          <template v-slot:title>{{ item.title }}</template>
          <template v-slot:head_img>
            <van-image
              round
              class="head_img"
              width="20"
              height="20"
              :src="item.headUrl"
            ></van-image>
          </template>
          <template v-slot:author_name>{{ item.name }}</template>
          <template v-slot:like
            ><van-icon
              v-if="item.isactive == 'false'"
              name="like-o"
              color="red"
            ></van-icon>
            <van-icon name="like" color="red" v-else></van-icon>
          </template>
          <template v-slot:like_cnt>
            <div>
              {{ item.likes }}
            </div>
          </template>
        </InfoBoxVue>
      </div>
      <!-- <div class="focus_right">
        <InfoBoxVue class="info_box">
          <template v-slot:author_name> 草莓树莓 </template>
        </InfoBoxVue>
      </div> -->
    </div>
  </van-pull-refresh>
</template>

<script>
import InfoBoxVue from "../../../components/Home/InfoBox.vue";
import axios from "axios";
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      list: [],
      mid: "1",
      like: "like-o",
    };
  },
  created() {
    var love = [];
    if (!localStorage.getItem("love")) {
      localStorage.setItem("love", JSON.stringify(love));
    }
    var collect = [];
    if (!localStorage.getItem("collect")) {
      localStorage.setItem("collect", JSON.stringify(collect));
    }
    axios.get("/js/comment.json").then((res) => {
      if (localStorage.getItem("comment")) {
        return;
      } else {
        var list = res.data.comment;
        localStorage.setItem("comment", JSON.stringify(list));
      }
    });
    axios.get("/js/data.json").then((res) => {
      var item;
      if (!localStorage.getItem("find")) {
        item = res.data.find;
      } else {
        item = JSON.parse(localStorage.getItem("find"));
      }
      if (localStorage.getItem("publish")) {
        var publish = JSON.parse(localStorage.getItem("publish"));
        publish.headUrl = localStorage.getItem("head");
        publish.name = localStorage.getItem("name");
        publish.imageUrl =
          "https://ci.xiaohongshu.com/704d0fca-239a-b012-32ac-73ea393246bd?imageView2/2/w/1080/format/jpg";
        publish.likes = 0;
        localStorage.setItem("publish", JSON.stringify(publish));
        publish.imageList = [
          "https://ci.xiaohongshu.com/704d0fca-239a-b012-32ac-73ea393246bd?imageView2/2/w/1080/format/jpg",
          "https://ci.xiaohongshu.com/529198ac-999d-77f2-3853-5f4dd5eb8bc5?imageView2/2/w/1080/format/jpg",
          "https://ci.xiaohongshu.com/5d548663-323d-9725-779f-206ad252d620?imageView2/2/w/1080/format/jpg",
        ];
        localStorage.setItem("pub", JSON.stringify(publish));
        item.unshift(publish);
      }
      localStorage.setItem("find", JSON.stringify(item));
      localStorage.removeItem("publish");
      // console.log(this.list);
    });
  },
  mounted() {
    var item = [];
    if (!localStorage.getItem("pub")) {
      localStorage.setItem("pub", JSON.stringify(item));
    }
    this.getUser();
    //获取关注
    axios.get("/js/concern.json").then((res) => {
      var item = res.data.list;
      if (localStorage.getItem("friend")) {
        return;
      } else {
        for (var i in item) {
          if (item[i].uid === localStorage.getItem("uid")) {
            localStorage.setItem("friend", JSON.stringify(item[i].friend));
            console.log(this.list);
            return;
          }
        }
      }
    });
    this.getFocus();
    this.getlove();
  },
  components: { InfoBoxVue },
  methods: {
    getlove() {
      console.log(this.list);
    },
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    //获得关注表
    getFocus() {
      var find = JSON.parse(localStorage.getItem("find"));
      var friend = JSON.parse(localStorage.getItem("friend"));
      for (var i in find) {
        for (var j in friend) {
          if (friend[j].pid === find[i].uid) {
            this.list.push(find[i]);
            break;
          }
        }
      }
      console.log(this.list);
    }, //点击事件
    detailInfo(uid, pid) {
      this.$router.push("/home/detailinfo/" + uid + "/" + pid);
    },
    //获取用户数据 并设为本地存储
    getUser() {
      axios.get("/js/user.json").then((res) => {
        var item = res.data.user.datalist;
        var qq = localStorage.getItem("qq");
        // console.log(qq);
        for (var i in item) {
          if (item[i].email === qq) {
            localStorage.setItem("uid", item[i].uid);
            localStorage.setItem("name", item[i].name);
            localStorage.setItem("head", item[i].headUrl);
            localStorage.setItem("user", JSON.stringify(item[i]));
            return;
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.focus {
  margin: 40px 10px 50px 8px;
  width: 95%;
  height: 100%;
  line-height: 20px;
  text-align: center;
  column-count: 2;
  column-gap: 7px;
}
.info_box {
  /* margin-top: 10px; */
  height: 100%;
  break-inside: avoid;
}
.img {
  width: 100%;
  border-radius: 6px 6px 0 0;
}
.head_img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 100);
}
</style>